<ui:composition template="/market/templateCliente.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

	<h:head>

	</h:head>

	<ui:define name="cdRegistro">
		<link type="text/javascript" src="http//code.jquery.com/jquery-1.10.2.min.js"></link>
		<script>
			$( document ).ready(function() {
				$("#downloadLink").click();
				alert("PRUEBA");
			});
			$("#prueba").click(function() {
				alert("PRUEBA");
			});			
		</script>	
		<style>
		
	/* 		.ui-datagrid-column { background-color: transparent; }
			
			.ui-widget-content {
				border: 0px;
				padding: 10px;
				background-color: transparent;
			}
			
			.ui-widget-content a { color: #FFFFFF; }
						
	 */		.ui-button { padding:0px; }
			
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }
			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: 'Glyphicons Halflings'; }
			
			.ui-paginator, .ui-paginator-page { background-color: transparent; }
			
			.btn { margin:2px; }

		</style>



		<!-- <div class="well col-lg-10" style="margin:70px;"> -->
		<div class="well">
		
			<h:form enctype="multipart/form-data">
				
				<fieldset>
					<p:growl id="mensajes" showDetail="false" life="1000" sticky="true"
						autoUpdate="true" />						
						
					<legend>
						<h:outputLabel value="#{versionBean.contenido.nombre}"
							style="font-style:uppercase; " />
					</legend>
										
					<div class="form-group">
					
						<div class="pull-right col-lg-4" style="text-align: right;">
							<h3 class="subdescription text-primary">
								<h:outputText value="#{versionBean.contenido.subcategoria.nombre}" />
							</h3>
							<h5 class="text-info">
								<h:outputText value="#{versionBean.contenido.subcategoria.categoria.nombre}" />
							</h5>

							<!-- <p:rating value="#{ventaBean.getValoracionVersionContenido(versionBean.idVersion)}" readonly="true" /> -->

							<br />
							<br />
							<h6>Proveedor</h6>
							<h:outputText value="#{versionBean.contenido.proveedor.nick}" />
							<br />
							<h:outputText value="#{versionBean.contenido.proveedor.mail}" />
							<br />

						</div>
					
						<div class="col-lg-5">
							
							
							<div class="section pull-right" >
								<p:outputPanel rendered="#{loginBean.logueado}">
									<div id="gratis">
									
										<p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">
										    <p:graphicImage value="./Imagenes/loading9.gif" />
										</p:dialog>
									
										<br />
										<br />
										
										<h:form id="form" style="display: block;">  

											<p:commandButton
												id="downloadLink" title="Descargar" 
												ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"
												styleClass="btn btn-primary expand glyphicon glyphicon-cloud-download" style="padding: 10px 57px 10px 57px; margin:auto;"
												actionListener="#{ventaBean.buscarArchivo(versionBean.contenido.idContenido,versionBean.getPrecioVersion(versionBean.contenido.idContenido))}" >
												
											    <p:fileDownload value="#{ventaBean.archivo}" contentDisposition="attachment"/>
											</p:commandButton>
											<div id="prueba">
											prueba
											</div>	
										</h:form>
										
								<!-- <a href="#" class="btn buy expand" style="padding:0px;"><span class="glyphicon glyphicon-save"></span>  Descargar </a> -->
			
								<!-- <a href="#" class="btn expand paypal" style="padding:0px;"><span class="glyphicon glyphicon-shopping-cart"></span><b><span class="pay">  Pay</span><span class="pal">Pal</span></b></a> -->
			
							        </div>
						        </p:outputPanel>
						        
						        <br />
						        
						        <p:commandButton style="padding: 10px 57px 10px 57px; margin:auto;"
									actionListener="#{clienteBean.agregarWishlist(versionBean.contenido.idContenido)}"
									rendered="#{loginBean.logueado}" title="Agregar a Mi lista de deseos"
									styleClass="btn btn-success glyphicon glyphicon-bookmark" />
							
							</div>
							
							<p:graphicImage
								value="/Imagenes/Logos/#{versionBean.contenido.nombre}" 
								width="160" height="160" title="LOGO" style="border-radius:6px;" />
							<br/>							
							
							<br />
							<div>
								<p:rating value="3" readonly="true" />
							</div>
								
						</div>
					

					</div>

					
						<div class="panel-group col-lg-12" id="descripcion">
							<div class="panel panel-default">
								<div class="panel-heading" style="text-align:left;">
									<a data-toggle="collapse" data-parent="#descripcion" href="#collapseCero">
										<h3>Descripcion</h3>
									</a>
								</div>

								<div id="collapseCero" class="panel-collapse collapse in">
									<div class="panel-body">
										<h:outputText value="#{versionBean.contenido.descripcion}" />
									</div>
								</div>
							</div>
						</div>	


					
						<div class="panel-group col-lg-12" id="version">
							<div class="panel panel-default">
								<div class="panel-heading" style="text-align:left;">
									<a data-toggle="collapse" data-parent="#version" href="#collapseOne">
										<h3> Informacion de la Version </h3>
									</a>
								</div>

								<div id="collapseOne" class="panel-collapse collapse in">
									<div class="panel-body center" style="text-align: center;">
										<div class="form-group">
											<div class="col-lg-1">
												<i><h:outputLabel value="Numero" /></i><br />
												<h:outputLabel value="#{versionBean.numero}"
													styleClass="control-label" />
											</div>
											<div class="col-lg-2">
												<i><h:outputLabel value="Nombre" /></i><br />												
												<h:outputLabel value="#{versionBean.nombre}"
													styleClass="control-label" />
											</div>												
											<div class="col-lg-2">
												<i><h:outputLabel value="Precio" /></i>
												<br />
												<h:outputLabel value="$ #{versionBean.precio} (Dolares)"
													styleClass="control-label" />
											</div>
											<div class="col-lg-2">
												<i><h:outputLabel value="Tamaño" /></i>
												<br />
												<h:outputLabel value="#{versionBean.tamanio} KB"
													styleClass="control-label" />
											</div>
											<div class="col-lg-2">
												<i><h:outputLabel value="Fecha Ingresado" /></i>
												<br />
												<h:outputText value="#{versionBean.fechaCreacion}"
													styleClass="control-label">
													<f:convertDateTime dateStyle="long" pattern="dd/MM/yyyy"
														for="#{versionBean.fechaCreacion}" />
												</h:outputText>
											</div>
											<div class="col-lg-3">
												<i><h:outputLabel value="Nombre de Archivo" /></i>
												<br />
												<h:outputText value="#{versionBean.archivo}"
													styleClass="control-label" />
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
											

					
						<div class="panel-group col-lg-12" id="multimedia">
							<div class="panel panel-default">

								<div class="panel-heading" style="text-align:left;">
										<a data-toggle="collapse" data-parent="#multimedia"
											href="#collapseTwo">
											<h3>Multimedia</h3>
										</a>
								</div>

								<div id="collapseTwo" class="panel-collapse collapse in">
									<div class="panel-body" style="text-align: center;">
										<div class="" style="margin: 0px auto;">
											<div class="multi-left">
												<iframe width="380" height="250"
													src="//www.youtube.com/embed/#{versionBean.contenido.video}"
													frameborder="0" style="text-align: center !important;"></iframe>
											</div>
											<div class="multi-right">
												<p:galleria value="#{versionBean.listaImagenes()}"
													var="image" panelWidth="380" panelHeight="200"
													showCaption="true">
													<p:graphicImage value="/Imagenes/#{image}"
														title="#{versionBean.contenido.nombre}" height="250"
														width="380"
														style="text-align:center; vertical-align:middle;" />
												</p:galleria>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>




					<!-- <div class="form-group col-lg-8" style="width:900px; padding:20px; margin:20px;"> -->


				</fieldset>
			</h:form>
		</div>
	
	</ui:define>
</ui:composition>